<template>
  <template v-if="props.mode == 'default'">
    <el-dialog v-model.trim="dialogVisible" class="mt-10" destroy-on-close>
      <Main
        v-model.trim="urls"
        :mode="props.mode"
        :show-mode="props.showMode"
        :max="props.max"
        :name="props.name"
        ref="dialogMainRef"
      ></Main>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="HandleDialogSureClick()"> 确实选中 </el-button>
        </div>
      </template>
    </el-dialog>
    <ul class="h-3/4 flex gap-1 overflow-auto" @click="dialogVisible = true">
      <template v-if="!!urls && JSON.parse(urls).length > 0">
        <li class="w-20 h-28" v-for="item of JSON.parse(urls)" :key="item.url">
          <img :src="item.type.includes('file') ? 'http://i18nport.dongsongkeji.com.cn/upload/3346c4c3-c2a3-53ad-958a-ce029b95b21e.png' : item.url" alt=""/>
          <div class="truncate">{{ item.filename }}</div>
        </li>
      </template>
      <li class="bg-gray-300 h-full w-full justify-center items-center flex" v-else>点击选择</li>
    </ul>
  </template>
  <Main
    :mode="props.mode"
    :show-mode="props.showMode"
    :max="props.max"
    :name="props.name"
    ref="mainRef"
    v-else
  ></Main>
</template>

<script setup lang="ts">
import Main from './container.vue'
import { ref } from 'vue'
const props = withDefaults(
  defineProps<{
    mode?: 'default' | 'select'
    showMode?: string
    max?: number
    name?: string
  }>(),
  {
    mode: 'default',
    showMode: 'image',
    max: 99,
    name: 'img'
  }
)
const dialogMainRef = ref()
const mainRef = ref()
const urls = defineModel<string>({ default: null })
const dialogVisible = ref(false)
function HandleDialogSureClick() {
  console.log("选中了...");
  
  dialogMainRef.value.HandleSelectFileClick()
  dialogVisible.value = false
}
</script>
<style>
.el-dialog__header + .el-dialog__body {
  padding: 0 15px;
}
:deep(.el-dialog__body) {
  padding: 0 !important;
}
</style>
